<template>
  <j-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <j-form-container :disabled="formDisabled">
        <!-- 主表单区域 -->
        <a-form :form="form" slot="detail">
          <a-row>
            <a-col :xs="24" :sm="12">
              <a-form-item label="仓库编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['storeCode', validatorRules.storeCode]" placeholder="请输入仓库编码"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="12">
              <a-form-item label="仓库名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['storeName', validatorRules.storeName]" placeholder="请输入仓库名称"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="12">
              <a-form-item label="仓库类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-dict-select-tag
                  type="list"
                  v-decorator="['type', validatorRules.type]"
                  :trigger-change="true"
                  dictCode="store_type"
                  placeholder="请选择仓库类型"
                />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="12">
              <a-form-item label="省/市/区" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-area-linkage type="cascader" v-decorator="['areaValue']" placeholder="请输入省市区" />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="12">
              <a-form-item label="仓库地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['address']" placeholder="请输入仓库地址"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="12">
              <a-form-item label="负责人姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['principalName']" placeholder="请输入负责人姓名"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="12">
              <a-form-item label="负责人电话" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['principalPhone']" placeholder="请输入负责人电话"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="12">
              <a-form-item label="承租开始日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-date
                  placeholder="请选择承租开始日期"
                  v-decorator="['startDate', validatorRules.startDate]"
                  :trigger-change="true"
                  style="width: 100%"
                />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="12">
              <a-form-item label="承租到期日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-date
                  placeholder="请选择承租到期日期"
                  v-decorator="['endDate', validatorRules.endDate]"
                  :trigger-change="true"
                  style="width: 100%"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </j-form-container>
      <!-- 子表单区域 -->
      <a-tabs v-model="activeKey" @change="handleChangeTabs">
        <a-tab-pane tab="仓库仓位表" :key="refKeys[0]" :forceRender="true">
          <j-editable-table
          :disabled="formDisabled"
            :ref="refKeys[0]"
            :loading="bizStoreSpaceTable.loading"
            :columns="bizStoreSpaceTable.columns"
            :dataSource="bizStoreSpaceTable.dataSource"
            :maxHeight="300"
            :rowNumber="true"
            :rowSelection="!formDisabled"
            :actionButton="!formDisabled"
          />
        </a-tab-pane>
      </a-tabs>
    </a-spin>
<!--    <template slot="footer">-->
<!--      <a-button key="back" @click="handleCancel"> 关闭 </a-button>-->
<!--      <a-button key="submit" type="primary" :disabled="!isDateRule" @click="handleOk"> 确定 </a-button>-->
<!--    </template>-->
  </j-modal>
</template>

<script>
import { pca, pcaa } from 'area-data'
import pick from 'lodash.pick'
import { FormTypes, getRefPromise } from '@/utils/JEditableTableUtil'
import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'
import { validateDuplicateValue } from '@/utils/util'
import JDate from '@/components/jeecg/JDate'
import JDictSelectTag from '@/components/dict/JDictSelectTag'
import JAreaLinkage from '@comp/jeecg/JAreaLinkage'

// api
// import {getCheckBySpaceCode} from '@/api/storeApproval'

export default {
  name: 'BizStoreModal',
  mixins: [JEditableTableMixin],
  components: {
    JDate,
    JDictSelectTag,
    JAreaLinkage,
  },
  computed: {
    formDisabled() {
      return this.disableSubmit
    },
  },
  data() {
    return {
      storeId: '',
      isDateRule: true,
      disableSubmit: false,
      // -----------------------
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      labelCol2: {
        xs: { span: 24 },
        sm: { span: 3 },
      },
      wrapperCol2: {
        xs: { span: 24 },
        sm: { span: 20 },
      },
      // 新增时子表默认添加几行空数据
      addDefaultRowNum: 1,
      validatorRules: {
        storeCode: {
          rules: [
            { required: true, message: '请输入仓库编码!' },
            {
              validator: (rule, value, callback) =>
                validateDuplicateValue('biz_store', 'store_code', value, this.model.id, callback),
            },
          ],
        },
        storeName: {
          rules: [{ required: true, message: '请输入仓库名称!' }],
        },
        type: {
          rules: [{ required: true, message: '请输入仓库类型!' }],
        },
        endDate: {
          rules: [{ validator: this.endDateRule }],
        },
        startDate: {
          rules: [{ validator: this.startDateRule }],
        },
      },
      refKeys: ['bizStoreSpace'],
      tableKeys: ['bizStoreSpace'],
      activeKey: 'bizStoreSpace',
      // 仓库仓位表
      bizStoreSpaceTable: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: '仓位编码',
            key: 'spaceCode',
            type: FormTypes.input,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: '',
            validateRules: [
              {
                required: true, // 必填
                message: '${title}不能为空' // 提示的文本
              },
              {
                unique: true,
                message: '${title}不能重复' // 提示的文本
              },
            ],
          },
          {
            title: '备注',
            key: 'remark',
            type: FormTypes.input,
            width: '500px',
            placeholder: '请输入${title}',
            defaultValue: '',
          },
        ],
      },
      url: {
        add: '/storage/store/add',
        edit: '/storage/store/edit',
        bizStoreSpace: {
          list: '/storage/store/queryStoreSpaceByMainId',
        },
      },
    }
  },
  methods: {

    getAllTable() {
      let values = this.tableKeys.map((key) => getRefPromise(this, key))
      return Promise.all(values)
    },
    /** 调用完edit()方法之后会自动调用此方法 */
    editAfter() {
      // this.storeId = this.model.storeId

      let fieldval = pick(
        this.model,
        'storeCode',
        'storeName',
        'type',
        'areaValue',
        'address',
        'principalName',
        'principalPhone',
        'startDate',
        'endDate'
      )
      this.$nextTick(() => {
        this.form.setFieldsValue(fieldval)
      })
      // 加载子表数据
      if (this.model.id) {
        let params = { id: this.model.id }
        this.requestSubTableData(this.url.bizStoreSpace.list, params, this.bizStoreSpaceTable)
      }

    },
    /** 整理成formData */
    classifyIntoFormData(allValues) {
      let main = Object.assign(this.model, allValues.formValue)

      return {
        ...main, // 展开
        bizStoreSpaceList: allValues.tablesValue[0].values,
      }
    },
    validateError(msg) {
      this.$message.error(msg)
    },
    popupCallback(row) {
      this.form.setFieldsValue(
        pick(
          row,
          'storeCode',
          'storeName',
          'type',
          'areaValue',
          'address',
          'principalName',
          'principalPhone',
          'startDate',
          'endDate'
        )
      )
    },
    /* 校验规则 */
    endDateRule(rule, value, callback) {
      const form = this.form
      let endTime = value ? new Date(value).getTime() : 0
      let startTime = form.getFieldValue('startDate') ? new Date(form.getFieldValue('startDate')).getTime() : 0

      if (endTime) {
        if (endTime >= startTime) {
          this.isDateRule = true
          callback()
        } else {
          this.isDateRule = false
          callback('承租结束日期须大于承租开始日期')
        }
      } else {
        this.isDateRule = true
        callback()
      }
    },
    startDateRule(rule, value, callback) {
      const form = this.form
      let startTime = value ? new Date(value).getTime() : 0
      let endTime = form.getFieldValue('endDate') ? new Date(form.getFieldValue('endDate')).getTime() : 0

      if (endTime) {
        if (startTime - endTime > 0) {
          this.isDateRule = false
          callback('承租开始日期须小于承租结束日期')
        } else {
          this.isDateRule = true
          callback()
        }
      } else {
        this.isDateRule = true
        callback()
      }
    },
  },
}
</script>

<style scoped>
</style>